<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>chat</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <script type="text/javascript" src="scripts/hprose-html5/dist/hprose-html5.js"></script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="column">
            <div class="thumbnail">
                <div class="caption" id="dialog"></div>
            </div>
            <form onsubmit="onSubmit(); return false;">
                <select style="margin-bottom:8px" id="userlist">
                    <option value="" selected>All</option>
                </select>
                <textarea class="textarea thumbnail" id="textarea"></textarea>
                <div class="say-btn"><input type="submit" class="btn btn-default" value="send" /></div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    // function LogFilter() {
    //     this.inputFilter = function(value) {
    //         console.log(hprose.BytesIO.toString(value));
    //         return value;
    //     };
    //     this.outputFilter = function(value) {
    //         console.log(hprose.BytesIO.toString(value));
    //         return value;
    //     };
    // }
    function inputName() {
        var name = prompt('input your name：', '');
        if (!name || name == 'null') {
            alert("The name is empty or 'null'，please input again.");
            return inputName();
        }
        return name;
    }
    var client = hprose.Client.create('ws://192.168.1.25:5555/', ['getAllUsers', 'sendMessage', 'broadcast']);
    // client.onError = function(name, e) {
    //     console.error(e);
    // };
    //client.filter = new LogFilter();
    client.sendMessage.oneway = true;
    client.broadcast.oneway = true;
    var me = inputName();
    client.subscribe('message', me, function(message) {
        message = message.replace(/\n/g, '\n<br />');
        var dialog = document.getElementById('dialog');
        dialog.innerHTML = dialog.innerHTML + '<div class="speech_item"><p class="triangle-isosceles top">' + message + '</p></div>';
    });
    var updateUserList = function(users) {
        var userlist = document.getElementById('userlist');
        var to = userlist.options[userlist.selectedIndex].value;
        var i;
        var options = '<option value="">All</option>';
        users.forEach(function(user) {
            if (user != me) {
                options += '<option value="' + user + '" ' + (to == user ? 'selected' : '') + '>' + user + '</option>';
            }
        });
        userlist.innerHTML = options;
    };
    client.subscribe('updateUsers', me, updateUserList);
    client.getAllUsers(updateUserList);
    function onSubmit() {
        var input = document.getElementById('textarea');
        var userlist = document.getElementById('userlist');
        var to = userlist.options[userlist.selectedIndex].value;
        if (to) {
            client.sendMessage(me, to, input.value);
        }
        else {
            client.broadcast(me, input.value);
        }
        input.value = "";
        input.focus();
    }
</script>
</body>
</html>